<template>
	<div class="add-api">
		<el-dialog
			v-model="dialogVisible"
			:title="dialogTitle"
			width="500">
			<div class="add-api">
				<el-form
					ref="ruleFormRef"
					style="max-width: 600px"
					:model="ruleForm"
					:rules="rules"
					label-width="auto"
					class="demo-ruleForm"
					:size="formSize"
					status-icon>
					<el-form-item
						label="服务调用方"
						prop="region">
						<el-select
							v-model="ruleForm.region"
							placeholder="请选择...">
							<el-option
								label="Zone one"
								value="shanghai" />
						</el-select>
					</el-form-item>
					<el-form-item
						label="服务提供方"
						prop="region">
						<el-select
							v-model="ruleForm.region"
							placeholder="请选择...">
							<el-option
								label="Zone one"
								value="shanghai" />
						</el-select>
					</el-form-item>
					<el-form-item
						label="网关"
						prop="region">
						<el-select
							v-model="ruleForm.region"
							placeholder="请选择...">
							<el-option
								label="Zone one"
								value="shanghai" />
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button
						type="primary"
						@click="submitForm(ruleFormRef)">
						确认
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import type { ElMessageBox, ComponentSize, FormInstance, FormRules } from 'element-plus'

	interface RuleForm {
		name: string
		region: string
		count: string
		date1: string
		date2: string
		delivery: boolean
		location: string
		type: string[]
		resource: string
		desc: string
	}

	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = reactive<RuleForm>({
		name: '',
		region: '',
	})

	const rules = reactive<FormRules<RuleForm>>({
		name: [
			{ required: true, message: '内容不能为空', trigger: 'blur' },
		],
		region: [
			{
				required: true,
				message: '内容不能为空',
				trigger: 'change',
			},
		],
	})
	const dialogVisible = ref(false)
	const dialogTitle = ref('')

	const submitForm = async (formEl: FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				console.log('submit!')
			} else {
				console.log('error submit!', fields)
			}
		})
	}

	const onSubmit = () => {
		console.log('submit!')
	}

	const showDialog = val => {
		dialogVisible.value = val
	}

	const setTitle = val => {
		dialogTitle.value = val
	}

	defineExpose({
		showDialog,
		setTitle,
	})
</script>

<style lang="scss" scoped></style>
